@import '../styles/themes/default';

$dropdown: 'snake-dropdown';

.#{$dropdown} {
  position: absolute;
  z-index: $zindexDropdown;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.65);
  font-size: $body;
  line-height: $lineHeight;
  list-style: none;
  cursor: pointer;
  background-color: #fff;
  margin: 0;
  padding: 4px 0;
  text-align: left;

  &-content {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: $borderRadius;
    padding: 4px 0;
  }

  &-slide-appear,
  &-slide-enter {
    opacity: 0;
    animation-play-state: paused;
  }

  &-slide-appear-active.#{$dropdown}-bottom,
  &-slide-appear-active.#{$dropdown}-bottomLeft,
  &-slide-appear-active.#{$dropdown}-bottomRight,
  &-slide-enter-active.#{$dropdown}-bottom,
  &-slide-enter-active.#{$dropdown}-bottomLeft,
  &-slide-enter-active.#{$dropdown}-bottomRight {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-timing-function: $easeOutQuint;
    animation-name: slideUpIn;
    animation-play-state: running;
  }

  &-slide-appear-active.#{$dropdown}-top,
  &-slide-appear-active.#{$dropdown}-topLeft,
  &-slide-appear-active.#{$dropdown}-topRight,
  &-slide-enter-active.#{$dropdown}-top,
  &-slide-enter-active.#{$dropdown}-topLeft,
  &-slide-enter-active.#{$dropdown}-topRight {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-timing-function: $easeOutQuint;
    animation-name: slideDownIn;
    animation-play-state: running;
  }

  &-slide-exit {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-timing-function: $easeInQuint;
    animation-play-state: paused;
  }

  &-slide-exit-active.#{$dropdown}-bottom,
  &-slide-exit-active.#{$dropdown}-bottomLeft,
  &-slide-exit-active.#{$dropdown}-bottomRight {
    animation-name: slideUpOut;
    animation-play-state: running;
  }

  &-slide-exit-active.#{$dropdown}-top,
  &-slide-exit-active.#{$dropdown}-topLeft,
  &-slide-exit-active.#{$dropdown}-topRight {
    animation-name: slideDownOut;
    animation-play-state: running;
  }
}

@keyframes slideUpIn {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0% 0%;
  }
}

@keyframes slideUpOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 0% 0%;
  }

  100% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
  }
}

@keyframes slideDownIn {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 100%;
  }
}

@keyframes slideDownOut {
  0% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 100% 100%;
  }

  100% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
  }
}
